import React from 'react'

// 布局相关组件
import 'antd/dist/antd.css'; 
import { Layout, Menu } from 'antd';
import { HeartOutlined, StarOutlined, NotificationOutlined } from '@ant-design/icons';
const { Content, Footer, Sider } = Layout;

// 路由相关组件
import {Link, Route, Switch} from 'react-router-dom'

import MovieList from './MovieList.jsx'
import MovieDetail from './MovieDetail.jsx'

export default class MovieContainer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return <Layout style={{height: '100%'}}>
    <Sider className="site-layout-background" width={200}>
      <Menu
        mode="inline"
        defaultSelectedKeys={window.location.hash.split('/')[2]}
        style={{ height: '100%' }}
      >
        <Menu.Item key="top_250" icon={<HeartOutlined />}><Link to="/movie/top_250/1">Top 250</Link></Menu.Item>
        <Menu.Item key="in_theaters" icon={<StarOutlined />}><Link to="/movie/in_theaters/1">正在热映</Link></Menu.Item>
        <Menu.Item key="coming_soon" icon={<NotificationOutlined />}><Link to="/movie/coming_soon/1">即将上映</Link></Menu.Item>
      </Menu>
    </Sider>
    <Layout style={{paddingLeft: '1px'}}>
      <Content className="site-layout-content" style={{ padding: '10px 24px', minHeight: '280', backgroundColor: '#fff' }}>
        {/* 匹配路由规则时提供两个参数，获取方式：this.props.match.params */}
        {/* 这样会导致detail路由地址可以同时匹配到MovieList组件 */}
        {/* 使用switch可以保证只会匹配到一个组件 */}
        <Switch>
          <Route exact path="/movie/:type/:page" component={MovieList}></Route>
          <Route exact path="/movie/detail/:type/:id" component={MovieDetail}></Route>
        </Switch>
      </Content>
    </Layout>
    </Layout>
  }
}